<!doctype html>
<!--[if IE 7 ]>
<html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="jquery.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>jQuery</title>

    <meta name="author" content="JS Foundation - js.foundation">
    <meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">

    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="../jquery-wp-content/themes/jquery.com/i/favicon.ico">

    <link rel="stylesheet" href="../jquery-wp-content/themes/jquery/css/base.css?v=3">
    <link rel="stylesheet" href="../jquery-wp-content/themes/jquery.com/style.css">

    <script src="../jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="../jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="../jquery-wp-content/themes/jquery/js/main.js"></script>

    <script src="https://use.typekit.net/wde1aof.js"></script>
    <script>try {
        Typekit.load();
    } catch (e) {
    }</script>
    <!-- at the end of the HEAD -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
    <link rel="stylesheet" href="../jquery-wp-content/themes/jquery/css/docsearch.css">

    <link rel='https://api.w.org/' href='//jquery.com/wp-json/'/>
    <meta name="generator" content="WordPress 4.5.2"/>
    <link rel="alternate" type="application/json+oembed"
          href="//jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjquery.com%2F"/>
    <link rel="alternate" type="text/xml+oembed"
          href="//jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fjquery.com%2F&#038;format=xml"/>

</head>
<body class="jquery home page page-id-5 page-template page-template-page-fullwidth page-template-page-fullwidth-php page-slug-index single-author singular">

<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="projects">
                    <li class="project jquery"><a href="" title="jQuery">jQuery</a></li>
                    <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                    <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery
                        Mobile</a></li>
                    <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                    <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
                </ul>
                <ul class="links">
                    <li><a href="https://plugins.jquery.com/">插件</a></li>
                    <li class="dropdown"><a href="https://contribute.jquery.org/">贡献</a>
                        <ul>
                            <li><a href="https://js.foundation/CLA">CLA</a></li>
                            <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
                            <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
                            <li><a href="https://contribute.jquery.org/code/">Code</a></li>
                            <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
                            <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/events">事件</a>
                        <ul class="wide">
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://jquery.org/support/">支持</a>
                        <ul>
                            <li><a href="https://learn.jquery.com/">Learning Center</a></li>
                            <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
                            <li><a href="https://forum.jquery.com/">论坛</a></li>
                            <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                            <li><a href="https://jquery.org/support/">广告支持</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/">JS基金会</a>
                        <ul>
                            <li><a href="https://js.foundation/about/join">加入</a></li>
                            <li><a href="https://js.foundation/about/members">成员</a></li>
                            <li><a href="https://js.foundation/about/leadership">领导</a></li>
                            <li><a href="https://js.foundation/community/code-of-conduct">管理</a></li>
                            <li><a href="https://js.foundation/about/donate">捐献</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>

<div id="container">
    <div id="logo-events" class="constrain clearfix">
        <h2 class="logo"><a href="" title="jQuery">jQuery</a></h2>

        <aside>
            <div id="broadcast">
                <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img
                        src="../jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation"
                        alt="Support the JS Foundation" width="400" height="100"></a>
            </div>
        </aside>
    </div>

    <nav id="main" class="constrain clearfix">
        <div class="menu-top-container">
            <ul id="menu-top" class="menu">
                <li class="menu-item"><a href="download/">下载</a></li>
                <li class="menu-item"><a href="../api.jquery.com/">API 文档</a></li>
                <li class="menu-item"><a href="../blog.jquery.com/">博客</a></li>
                <li class="menu-item"><a href="../plugins.jquery.com/">插件</a></li>
                <li class="menu-item"><a href="../jquery.com/browser-support/">浏览器支持</a></li>
            </ul>
        </div>

        <form method="get" class="searchform" action="//jquery.com/">
            <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
            <label>
                <span class="visuallyhidden">Search jQuery</span>
                <input type="text" name="s" value=""
                       placeholder="搜索">
            </label>
        </form>
    </nav>

    <div id="content-wrapper" class="clearfix row">


        <div class="content-full full-width twelve columns">
            <div id="content">


                <div id="banner-secondary" class="row">
                    <div class="downloads-box four columns push-eight">
                        <div class="download-main">
                            <a href="../jquery.com/download/" class="button large">
                                <span class="download"></span>
                                下载 jQuery
                                <span>v3.6.0</span>
                                <span class="support-notice">不再维护1.x和2.x版本。</span>
                            </a>
                            <div class="download-options">
                                <a href="https://github.com/jquery/jquery">去GitHub上浏览源代码 &#x2192;</a>
                                <a href="https://learn.jquery.com/about-jquery/how-jquery-works/">jQuery的工作原理
                                    &#x2192;</a>
                            </div>
                        </div>
                    </div>
                    <div class="features-box row eight columns pull-four">
                        <div class="feature-box lightweight-footprint four columns center-txt">
                            <div class="feature-box-image"></div>
                            <h3>轻量封装</h3>
                            <p>压缩后之只有30kB，可作为AMD模块导入</p>
                        </div>

                        <div class="feature-box css3-compliant four columns center-txt">
                            <div class="feature-box-image"></div>
                            <h3>遵循CSS3规范</h3>
                            <p>支持CSS3选择器查找元素以及样式内属性操作</p>
                        </div>

                        <div class="feature-box cross-browser four columns center-txt">
                            <div class="feature-box-image"></div>
                            <h3>跨浏览器</h3>
                            <p><a href="browser-support/">Chrome, Edge, Firefox, IE, Safari, Android, iOS, 等</a>
                            </p>
                        </div>
                    </div>
                </div>

                <div id="home-content" class="clearfix row">
                    <section class="eight columns">
                        <h2 class="block">什么是jQuery?</h2>

                        <p>
                            jQuery是一个快速、小且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并提供了一个跨多种浏览器的易于使用的API。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。</p>

                        <h2 class="block">其他相关项目</h2>
                        <section class="project-tiles row">
                            <a href="https://jqueryui.com" class="project-tile six columns color secondary-orange">
                                <div class="jqueryui small logo">jQueryUI</div>
                            </a>
                            <a href="https://jquerymobile.com" class="project-tile six columns color secondary-green">
                                <div class="jquery-mobile small logo">jQuery Mobile</div>
                            </a>
                        </section>
                        <section class="project-tiles row">
                            <a href="https://qunitjs.com" class="project-tile six columns color qunit-secondary-purple">
                                <div class="qunitjs small logo">QUnit</div>
                            </a>
                            <a href="https://sizzlejs.com" class="project-tile six columns color sizzle-red">
                                <div class="sizzlejs small logo">Sizzle</div>
                            </a>
                        </section>
                    </section>
                    <aside class="four columns resources">
                        <h3>资源</h3>
                        <ul>
                            <li><a href="../api.jquery.com">jQuery核心API文档</a></li>
                            <li><a href="https://learn.jquery.com">jQuery学习中心</a></li>
                            <li><a href="https://blog.jquery.com">jQuery博客</a></li>
                            <li><a href="https://contribute.jquery.com">Contribute to jQuery</a></li>
                            <li><a href="https://jquery.org">关于jQuery基金会</a></li>
                            <li><a href="https://github.com/jquery/jquery/issues">浏览或提交jQuery错误</a></li>
                        </ul>

                    </aside>
                </div>

                <section>
                    <h2 class="block">使用示例</h2>

                    <h3>DOM遍历与操作</h3>
                    <p>使用类名&apos;continue&apos;来获取<code>&lt;button&gt;</code>元素并将它的内容修改为 &apos;Next Step...&apos;。</p>
                    <div class="syntaxhighlighter javascript">
                        <table>
                            <tbody>
                            <tr>

                                <td class="gutter">

                                    <div class="line n1">1</div>

                                </td>

                                <td class="code">
                                    <pre><div class="container"><div class="line"><code>$( <span class="hljs-string">&quot;button.continue&quot;</span> ).html( <span
                                            class="hljs-string">&quot;Next Step...&quot;</span> )</code></div></div></pre>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>


                    <h3>事件处理</h3>
                    <p>
                        当<code>#button-container</code>被点击后，显示使用<code>display:none</code>样式隐藏的元素<code>#banner-message</code>。
                    </p>
                    <div class="syntaxhighlighter javascript">
                        <table>
                            <tbody>
                            <tr>

                                <td class="gutter">

                                    <div class="line n1">1</div>

                                    <div class="line n2">2</div>

                                    <div class="line n3">3</div>

                                    <div class="line n4">4</div>

                                </td>

                                <td class="code">
                                    <pre><div class="container"><div class="line"><code><span
                                            class="hljs-keyword">var</span> hiddenBox = $( <span class="hljs-string">&quot;#banner-message&quot;</span> );</code></div></div><div
                                            class="container"><div class="line"><code>$( <span class="hljs-string">&quot;#button-container button&quot;</span> ).on( <span
                                            class="hljs-string">&quot;click&quot;</span>, <span
                                            class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                            class="hljs-params"> event </span>) </span>{</code></div></div><div
                                            class="container"><div
                                            class="line"><code>  hiddenBox.show();</code></div></div><div
                                            class="container"><div class="line"><code>});</code></div></div></pre>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>


                    <h3>Ajax</h3>
                    <p>
                        使用查询参数<code>zipcode=97201</code>在本地调用<code>/api/getWeather</code>服务并把返回文本替换到<code>#weather-temp</code>元素内。
                    </p>
                    <div class="syntaxhighlighter javascript">
                        <table>
                            <tbody>
                            <tr>

                                <td class="gutter">

                                    <div class="line n1">1</div>

                                    <div class="line n2">2</div>

                                    <div class="line n3">3</div>

                                    <div class="line n4">4</div>

                                    <div class="line n5">5</div>

                                    <div class="line n6">6</div>

                                    <div class="line n7">7</div>

                                    <div class="line n8">8</div>

                                    <div class="line n9">9</div>

                                </td>

                                <td class="code">
                                    <pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div
                                            class="container"><div class="line"><code>  <span
                                            class="hljs-attr">url</span>: <span class="hljs-string">&quot;/api/getWeather&quot;</span>,</code></div></div><div
                                            class="container"><div class="line"><code>  <span
                                            class="hljs-attr">data</span>: {</code></div></div><div class="container"><div
                                            class="line"><code>    <span class="hljs-attr">zipcode</span>: <span
                                            class="hljs-number">97201</span></code></div></div><div class="container"><div
                                            class="line"><code>  },</code></div></div><div class="container"><div
                                            class="line"><code>  <span class="hljs-attr">success</span>: <span
                                            class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                            class="hljs-params"> result </span>) </span>{</code></div></div><div
                                            class="container"><div class="line"><code>    $( <span class="hljs-string">&quot;#weather-temp&quot;</span> ).html( <span
                                            class="hljs-string">&quot;&lt;strong&gt;&quot;</span> + result + <span
                                            class="hljs-string">&quot;&lt;/strong&gt; degrees&quot;</span> );</code></div></div><div
                                            class="container"><div class="line"><code>  }</code></div></div><div
                                            class="container"><div class="line"><code>});</code></div></div></pre>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </section>
            </div>
        </div>

    </div>
</div>

<footer class="clearfix simple">
    <div class="constrain">
        <div class="row">
            <div class="six columns offset-by-three">
                <h3><span>图书</span></h3>
                <ul class="books">
                    <li>
                        <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
                            <img src="//jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg"
                                 alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92"
                                 height="114">
                            Learning jQuery Fourth Edition
                            <cite>Karl Swedberg and Jonathan Chaffer</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.manning.com/books/jquery-in-action-third-edition">
                            <img src="//jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg"
                                 alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92"
                                 height="114">
                            jQuery in Action
                            <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.syncfusion.com/ebooks/jquery">
                            <img src="//jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg"
                                 alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
                            jQuery Succinctly
                            <cite>Cody Lindley</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="legal">
            <ul class="footer-site-links">
                <li><a class="icon-pencil" href="https://learn.jquery.com/">学习中心</a></li>
                <li><a class="icon-group" href="https://forum.jquery.com/">论坛</a></li>
                <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
                <li><a class="icon-twitter" href="https://twitter.com/jquery">推特</a></li>
                <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
                <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
            </ul>
            <p class="copyright">
                Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights
                reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a
                    href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For
                a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a
                    href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a
                    href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on
                the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are
                trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any
                affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms
                of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a
                    href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
                <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a
                        href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
            </p>
        </div>

    </div>
</footer>

<script type='text/javascript' src='//jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
